<template>
  <template v-for="(item,index) in dataShowTypeList" :key="index">
    <!--              :color="dataShowStyleIsTable ? '#88968b' : '#128b0f'" -->
    <SvgIcon :name="item.icon +( dataShowType=== item.type ? ' active' : ' ')"
             @click="changeDataShowType(item)" :size="26"/>
    <el-divider v-if="index<dataShowTypeList.length-1" direction="vertical"></el-divider>
  </template>
</template>

<script setup name="RightToolDataShowType">

/**
 * 通过 defineProps 函数定义组件 props
 */
const props = defineProps({
	/**
	 * 是否显示搜索框
	 */
  dataShowType: {
		type: String,
		default: "card",
	},
});

const emits = defineEmits(['update:dataShowType']);

const dataShowTypeList=ref([
  {
    icon:"iconfont icon-liebiao1",
    type:"card"
  },
  {
    icon:"iconfont icon-liebiao",
    type:"table"
  },
])

//定义是表格显示 还是卡片显示
props.dataShowType=dataShowTypeList.value[0].type


/**
 * 更换数据显示样式
 * @param showType
 */
const changeDataShowType=(showType)=>{
  // dataShowType.value=showType.type
  emits("update:dataShowType",showType.type)
}


</script>

<style lang="scss" scoped>

</style>
